<template>
  <div ref="fuwfbf">
    <el-button type="primary" @click="excel">导出表格</el-button>
    <!-- <router-view></router-view>
    我是微信登录-广财校友卡 广财校友卡认证流程： -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="id" width="180" align="center" />
      <el-table-column prop="stuName" label="姓名" width="100" align="center" />
      <el-table-column
        prop="classname"
        label="班级"
        width="140"
        align="center"
      />
      <el-table-column
        prop="organizationName"
        label="单位名称"
        width="180"
        align="center"
      />
      <el-table-column prop="office" label="职务/职称" width="140" align="center" />
      <el-table-column prop="address" label="常住地" align="center" />
      <el-table-column prop="phone" label="手机号" width="130" align="center" />
      <el-table-column prop="alumni" label="校友组织" width="190" align="center" />
      <!-- <el-table-column label="审核" align="center" width="180" type="index">
        <template #default="{ row,$index }">
          <div class="ufhe">
            <el-button v-show="row.type == 0" type="success" style="text-align: center" @click="wuhu(row.stuName,$index,row.classname)">审核</el-button>
            <el-button v-show="row.type == 2" type="success" style="text-align: center" @click="insert(row,$index)">通过</el-button>
            <el-button  v-show="row.type == 2" type="danger" style="text-align: center" @click="bh(row.isrow)">驳回</el-button>
            <el-button  v-show="row.type == 3" type="danger" style="text-align: center" @click="cancel(row.isrow)">驳回</el-button>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column prop="schYear" label="入学年份" align="center" />
      <el-table-column prop="school" label="学校" width="140" align="center" />
      <el-table-column prop="auth" label="学院" width="180" align="center" />
      <el-table-column prop="stuType" label="专业" width="140" align="center" />
      <el-table-column prop="teacher" label="辅导员" width="120" align="center" />
      <el-table-column prop="sex" label="性别" align="center" />
      <el-table-column label="审核状态" align="center">
        <template #default="{ row }">
          <div class="ufhe">
            已认证
            <!-- <span v-show="row.type == 1">审核中...</span>
            <span v-show="row.type == 0">待审核</span> -->
          </div>
          <!-- <div>
            <span v-show="row.type == 2">认证成功</span>
            <span v-show="row.type == 3">认证失败</span>
            <span v-show="row.type == 4">录入成功</span>
          </div> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="js" setup>
import { onMounted, ref } from "vue"
import {search,upset,xinxi} from '../../api/user'
import * as XLSX from "xlsx"
import {exportExcel} from '../../hook/excel'
onMounted(async () => {
  const res = await xinxi();
  tableData.value = res.data
  console.log(tableData.value);

// 修改顺序列
  // tableData.value.forEach(row => {
  //   const { type, openid, unionid, ...res } = row;
  //   row = { ...res, type, openid, unionid };
  // });

  // 检查数据列顺序
  const keys = Object.keys(tableData.value[0]);
  console.log('数据列顺序:', keys);
  
})
const excel = () => {
  // const data = XLSX.utils.json_to_sheet(tableData.value)//此处tableData.value为表格的数据
  // const wb = XLSX.utils.book_new()
  // XLSX.utils.book_append_sheet(wb, data)//test-data为自定义的sheet表名
  // XLSX.writeFile(wb,'test.xlsx')//test.xlsx为自定义的文件名
  const titleArr = ['序号','单位名称','职务职称','手机号','常住地','校友组织','班级','入学年份','学校','性别','专业','辅导员','学院','姓名','认证状态','openid','unionid']//表头中文名
  const columnOrder = ['id','organizationName', 'office', 'phone', 'address','alumni','classname','schYear','school','sex','stuType', 'teacher', 'auth','stuName','type','openid','unionid']; // 列顺序
  exportExcel(tableData.value, '校友认证情况', titleArr, 'sheetName',columnOrder);
}
const insert = async (e,b) => { await upset({id:e.id,stuName:e.stuName,classname:e.classname}); tableData.value[b].type = 4}
const wuhu = async (e,b,c) => {
  const res = await search({stuName:e,classname:c})
  console.log(res.data);
  if(res.data) {
   tableData.value[b].type = 2
  } else {
    tableData.value[b].type = 3
  }
}
const cancel = (e) => {
  console.log(e);
}
const tableData = ref([])
</script>
<style scoped>
.ufhe {
  text-align: center;
}
.cell {
  text-align: center;
}
</style>